import React, {Component} from 'react';
import {connect} from 'dva';
import moment from 'moment';
import { FormattedMessage, formatMessage } from 'umi/locale'; //此方法引入的数据可以在src/locales中配置
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Icon,
  Dropdown,
  Popover,
  InputNumber,
  DatePicker,
  message,
  Badge,
  Divider,
  Steps,
  Upload,
  Collapse, Empty,
} from 'antd';
import {Select,Button , Table ,Modal} from '@/components/CustomAntd'
const { TextArea } = Input;
import style from '../RoleManage.less';


@Form.create()
export default class List extends Component {
  componentDidMount() {

  }
  //点击确定
  onOk = e => {
    e.preventDefault();

    const { updateOnSubmit,modalType } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log(values);
        updateOnSubmit({
          ...values,
          modalType
        });
      }
    });
  };
  render() {
    const { hideCancel,visible,updateData,modalType,tenantList,form:{getFieldDecorator} } = this.props;
    return (
        <Modal
          visible={visible}
          title={modalType === 'create' ? '创建角色' : '修改角色信息'}
          onCancel={hideCancel}
          destroyOnClose={true}
          maskClosable={false}
          bodyStyle={{
            width: 800,
          }}
          width="800px"
          onOk = {this.onOk}
        >
          <Form layout="inline">
            {/* 行1 */}
            {getFieldDecorator('role_id', {
              initialValue: modalType === 'update' ? updateData.role_id : undefined,
            })(
              <Input type="hidden" className={style['input-box']} />
            )}
            <div className={style['motal-line']}>
              <div className={style['every-block']}>
                <p className={style.p1}>
                  <span className={style.star}>*</span>
                  {formatMessage({ id: 'iot.roleManage.roleManage_list.role_name' })}：
                </p>
                <Form.Item style={{ marginBottom: 0 }}>
                  {getFieldDecorator('role_name', {
                    initialValue: modalType === 'update' ? updateData.role_name : undefined,
                    rules: [
                      {
                        required: true,
                        message: '必须填写一个角色名称',
                      },
                      {
                        min: 1,
                        max: 15,
                        message: '角色名称应在15个字符内',
                      },
                      {
                        pattern: /^[^ ]+$/,
                        whitespace: true,
                        message: '不能使用空格',
                      },
                    ],
                  })(
                    <Input className={style['input-box']} />
                  )}
                </Form.Item>
              </div>
            </div>
            { //角色不需要选择租户可能
              tenantList.length > 1 ?
                <div className={style['motal-line']}>
                  <div className={style['every-block']}>
                    <p className={style.p1}>
                      <span className={style.star}>*</span>
                      {formatMessage({ id: 'iot.organization.organization_search.tenant_name' })}：
                    </p>
                    <Form.Item style={{ marginBottom: 0 }}>
                      {getFieldDecorator('tenant_id', {
                        initialValue: modalType === 'update' ? updateData.tenant_id : undefined,
                        rules: [
                          {
                            required: true,
                            message: '请选择',
                          },
                        ],
                      })(
                        <Select className={style['input-box']}>
                          {tenantList && tenantList.length>0 ?
                            tenantList.map(function (item) {
                              return <Option key= {item.tenant_id} id={item.tenant_id}
                                             value={item.tenant_id}>{item.tenant_name}
                              </Option>;
                            }) : []
                          }
                        </Select>
                      )}
                    </Form.Item>
                  </div>
                </div>
                : tenantList.length  === 1 ?
                    <Form.Item>
                      {getFieldDecorator('tenant_id', {
                        initialValue: tenantList[0].tenant_id,
                      })(
                        <Input type="hidden"  />
                      )}
                    </Form.Item> :
                []
            }

            {/* 文本 */}
            <div className={style['motal-line']} style={{ height: 100 }}>
              <p className={style.p2}>
                {formatMessage({ id: 'iot.roleManage.roleManage_list.description' })}：
              </p>
              <Form.Item style={{ marginBottom: 0 }}>
                {getFieldDecorator('description', {
                  initialValue: modalType === 'update' ? updateData.description : undefined,
                  rules: [
                    {
                      min: 0,
                      max: 255,
                      message: '详情不应该超过255个字符',
                    },
                    {
                      pattern: /^[^ ]+$/,
                      whitespace: true,
                      message: '(不能包含空格)',
                    }
                  ],
                })(
                  <TextArea rows={4} style={{ float: 'left', width: 620 }} />
                )}
              </Form.Item>
            </div>
          </Form>
        </Modal>
    );
  }
}
